<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>销量情况</el-breadcrumb-item>
      <el-breadcrumb-item>尿素</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <div class="sel">
        <el-select v-model="value"
                   placeholder="请选择"
                   @change="selects(value)">
          <el-option v-for="item in options"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </div>
      <el-table :data='dataShow'
                border
                stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="date"
                         label='日期'>
          <template slot-scope="scope">
            {{scope.row.date | dateFormat}}
          </template>
        </el-table-column>
        <el-table-column prop="name"
                         label='尿素类型'>
        </el-table-column>
        <el-table-column prop="enter"
                         label='进货'>
        </el-table-column>
        <el-table-column prop="out"
                         label='出货'>
        </el-table-column>
        <el-table-column prop="totals"
                         label='剩余'>
        </el-table-column>
        <el-table-column fixed="right"
                         label="操作"
                         width="50">
          <template slot-scope="scope">
            <el-button type="text"
                       size="small"
                       @click="edit(scope.row._id)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background
                     layout="total, sizes,prev, pager, next"
                     :total="total"
                     :page-size="pageSize"
                     :page-sizes="[30, 40, 50, 20]"
                     :pager-count="11"
                     :current-page='currentPage'
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange">

      </el-pagination>
      <el-row class="excel">
        <el-button type="primary"
                   @click="exportExcel">数据导出</el-button>
      </el-row>
    </el-card>
    <!--------编辑对话框--------->
    <el-dialog title="编辑数据"
               :visible.sync="editShow"
               width="30%"
               @close="editDialogClosed">
      <el-form ref="editDataFormRef"
               :model="editForm"
               :rules='addUreaRule'>
        <el-form-item label="进货"
                      prop="enter">
          <el-input v-model="editForm.enter"></el-input>
        </el-form-item>
        <el-form-item label="出货"
                      prop="out">
          <el-input v-model="editForm.out"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="editShow = false">取 消</el-button>
        <el-button type="primary"
                   @click="editData">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { isNumber } from '../plugins/validate'
export default {
  data () {
    return {
      ureaName: [],
      options: [],
      datas: [],

      compareForm: {

      },
      editForm: {
        enter: 0,
        out: 0,
        _id: '',
        date: new Date(),
        name: ''
      },
      addUreaRule: {
        enter: [
          { required: true, message: '不能为空哟！' },
          { validator: isNumber, message: '只能输入数字，整数或小数' }
        ],
        out: [
          { required: true, message: '不能为空哟！' },
          { validator: isNumber, message: '只能输入数字，整数或小数' }
        ]
      },
      //数据总条数
      total: 0,
      //当前页
      currentPage: 1,
      //一共多少页
      pageNum: 1,
      //当前页中的数据
      dataShow: [],
      //根据页数对数据分组，并存进每一页
      totalPage: [],
      //每页多少条
      pageSize: 30,
      //将数据转为数组
      dataArray: [],
      addShow: false,
      editShow: false,
      value: '',
      dataExcel: []
    }
  },
  created () {

    this.findAllExcel()
    this.findUreaName()

  },
  methods: {
    findUreaName () {
      let url = '/api/findUreaName'
      this.$http.get(url).then(res => {
        this.value = res.data[0].name
        for (let i = 0; i < res.data.length; i++) {
          this.ureaName[i] = res.data[i].name
          let option = {
            value: res.data[i].name,
            label: res.data[i].name
          }
          this.options.push(option)
        }
        this.findAll()
      })
    },
    //查询所有数据
    findAllExcel () {
      let url = '/api/urea1All'
      // this.$http.get(url, { params: { name: this.findName } }).then(res => {
      this.$http.get(url).then(res => {
        this.dataExcel = res.data
      })
    },
    findAll () {
      let url = '/api/urea1'
      this.$http.get(url, { params: { name: this.value } }).then(res => {
        // this.$http.get(url).then(res => {
        this.datas = res.data
        this.total = res.data.length
        this.pageData()
      })
    },
    selects (item) {
      this.value = item
      this.findAll()
    },

    //编辑某天的数据,先查询当天的数据
    edit (id) {
      this.editShow = true
      let url = '/api/findOneUrea1'
      this.$http.post(url, this.$qs.stringify({ _id: id })).then(res => {
        if (res.status === 200) {
          // this.compareForm = res.data
          this.editForm = res.data
          this.compareForm = JSON.parse(JSON.stringify(this.editForm))
        }
      })
    },
    //确定编辑数据
    editData () {
      this.$refs.editDataFormRef.validate(valid => {
        //判断提交的编辑数据与原数据是否相同，如相同则不提交
        let flags = this.$common.compare(this.compareForm, this.editForm)
        if (flags) return
        if (!valid) return
        this.editShow = false
        let url = '/api/editUrea1'
        this.$http.post(url, this.$qs.stringify(this.editForm)).then(res => {
          if (res.status === 200) {
            this.$common.succ('恭喜，编辑成功！')
            this.findAll()
          } else {
            this.$common.fail('对不起，编辑失败！')
          }
        })
      })

    },
    //计算分页，及存入数据
    pageData () {
      //计算页数
      this.pageNum = Math.ceil(this.datas.length / this.pageSize) || 1
      //根据页数对数据分组，并存进每一页
      for (let i = 0; i < this.pageNum; i++) {
        // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
        // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5条，即slice(0,5)，第二页是6-10条，即slice(5,10)...
        let das = []
        for (let j = 0; j < this.pageSize; j++) {
          if ((this.pageSize * i + j) < (this.datas.length)) {
            das[j] = this.datas[this.pageSize * i + j]
          }
        }
        this.totalPage[i] = das
      }
      this.dataShow = this.totalPage[this.currentPage - 1]
    },
    handleSizeChange (newSize) {

      this.pageSize = newSize
      // this.dataShow = this.totalPage[this.currentPage - 1]
      this.pageData()
    },
    //分页，修改页码时的设置
    handleCurrentChange (newPage) {
      this.currentPage = newPage
      this.dataShow = this.totalPage[this.currentPage - 1]
    },
    //关闭新增数据对话框同时把数据清空
    editDialogClosed () {
      this.$refs.editDataFormRef.resetFields()
    },
    exportExcel () {
      const tHeader = ['日期', '尿素类型', '进货', '出货', '结余'];
      const filterVal = ['stringDate', 'name', 'enter', 'out', 'totals'];
      const title = '两种尿素每天进出货情况'
      const list = this.dataExcel
      this.$common.export2Excel(tHeader, filterVal, list, title)
    },

  },
}
</script>
<style scoped>
.el-pagination {
  padding-top: 30px;
}
/* .el-breadcrumb {
  padding-bottom: 30px;
} */
.el-card div.sel {
  text-align: left;
  margin-bottom: 10px;
}
</style>